<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { GetSmsSendLogListParam } from '../types'
  import Pagination from '@/components/Pagination/index.vue'
  import { RefreshRight, Search } from '@element-plus/icons-vue'
  import sendLogList from '../service/sendLogList'
  import SendLogDetail from './SendLogDetail.vue'

  const { totalList, smsSendList, getSmsSendLogListLoading, getSmsSendLogListFn } = sendLogList

  // 筛选条件
  const filter = ref<GetSmsSendLogListParam>({
    keyword: '',
    limit: 50,
    page: 1,
    smsContent: '',
    type: null,
  })

  // 分页组件实例
  const paginationRef = ref<InstanceType<typeof Pagination> | null>(null)

  // 类型选项
  const typeOptional = ref([
    { label: '验证类短信', value: '1' },
    { label: '通知类', value: '2' },
    { label: '推广类短信', value: '3' },
  ])

  // 获取日志列表方法
  const getSendLogList = async (val = true) => {
    if (paginationRef.value) {
      if (val) paginationRef.value.setPage()
      filter.value.limit = paginationRef.value.size
      filter.value.page = paginationRef.value.current
    }
    await getSmsSendLogListFn(filter.value)
  }

  // 重置事件
  const onReset = () => {
    Object.assign(filter.value, {
      keyword: '',
      smsContent: '',
      type: null,
    })
    getSendLogList()
  }

  onMounted(() => {
    getSendLogList()
  })

  defineExpose({
    getSendLogList,
  })
</script>

<template>
  <div class="send_record">
    <div class="header">
      <el-select
        v-model="filter.type"
        placeholder="请选择"
        clearable
        @change="getSendLogList"
        @clear="getSendLogList"
      >
        <el-option
          v-for="item in typeOptional"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model.trim="filter.keyword"
        placeholder="短信模版名称/发送者名称/接收者手机号/接收者名称"
        class="keyword_input"
        clearable
        @keyup.enter="getSendLogList"
        @clear="getSendLogList"
      />
      <el-input
        v-model.trim="filter.smsContent"
        placeholder="发送的短信内容"
        class="sms_content_input"
        clearable
        @keyup.enter="getSendLogList"
        @clear="getSendLogList"
      />
      <HButton type="primary" @click="getSendLogList">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </HButton>
      <HButton @click="onReset">
        <el-icon>
          <RefreshRight />
        </el-icon>
        重置
      </HButton>
    </div>
    <div class="table">
      <el-table
        v-loading="getSmsSendLogListLoading"
        :data="smsSendList"
        height="100%"
        border
        resizable
        stripe
      >
        <!--序号-->
        <el-table-column label="序号" type="index" width="50" fixed="left" :align="'center'" />

        <!--模版名称-->
        <el-table-column label="模版名称" prop="name" show-overflow-tooltip width="180" />

        <!--短信类型-->
        <el-table-column label="短信类型" prop="type" show-overflow-tooltip width="86">
          <template #default="scope">
            <span v-if="scope.row.type === 1">验证类短信</span>
            <span v-if="scope.row.type === 2">通知类</span>
            <span v-else>推广类短信</span>
          </template>
        </el-table-column>

        <!--发送者名称-->
        <el-table-column label="发送者名称" prop="sendUser" show-overflow-tooltip width="140" />

        <!--短信内容-->
        <el-table-column label="短信内容" prop="smsContent" show-overflow-tooltip min-width="200" />

        <!--接收者手机号-->
        <el-table-column
          label="接收者手机号"
          prop="receiveUserPhone"
          show-overflow-tooltip
          width="104"
        />

        <!--接收者名称-->
        <el-table-column
          label="接收者名称"
          prop="receiveUsername"
          show-overflow-tooltip
          width="140"
        />

        <!--发送时间-->
        <el-table-column label="发送时间" prop="createTime" show-overflow-tooltip width="128" />

        <!--发送结果-->
        <el-table-column label="发送结果" prop="success" width="94" fixed="right" :align="'center'">
          <template #default="scope">
            <div class="flex_justify_center">
              <HStatus v-if="scope.row.success" type="success">发送成功</HStatus>
              <HStatus v-else type="error">发送失败</HStatus>
            </div>
          </template>
        </el-table-column>

        <!--操作-->
        <el-table-column label="操作" prop="operate" fixed="right" :align="'center'" width="50">
          <template #default="scope">
            <SendLogDetail :sms-id="scope.row.id">
              <HLink>详细</HLink>
            </SendLogDetail>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="paginationRef"
        :list_total="Number(totalList)"
        @size-change="getSendLogList"
        @current-change="getSendLogList(false)"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .send_record {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .header {
      display: flex;
      justify-content: flex-end;
      column-gap: 5px;

      :deep(.el-select) {
        width: 128px;
      }

      .keyword_input {
        width: 320px;
      }

      .sms_content_input {
        width: 140px;
      }
    }

    .table {
      max-height: calc(100% - 80px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }

  .header {
    display: flex;
    justify-content: flex-end;

    .filter {
      display: grid;
      grid-template-columns: 6vw 16vw 8vw auto;
      column-gap: 5px;

      .btn_group {
        display: flex;
        gap: 5px;

        .btn_item {
          height: 28px;
          padding: 0 6px;
          display: flex;
          align-items: center;
          gap: 5px;
          border-radius: 2px;
          border-width: 1px;
          border-style: solid;
          cursor: pointer;
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
  }
</style>
